import jcLoading from "./jcLoading/index.vue";

import create from "./create";

export default {
  install(Vue) {
    /**
     * 全屏loading 两个方法 show() close()
     * @param options
     * @returns {*|Vue}
     */
    let loadingDom;

    function close() {
      if (loadingDom) {
        loadingDom.vm.unmount();
        loadingDom.div.remove();
        loadingDom = null;
      }
    }
    Vue.config.globalProperties.$jcLoading = {
      show() {
        if (loadingDom) {
          return;
        }
        loadingDom = create(jcLoading, {
          onClose: () => close(),
        });
      },
      close,
    };
    // Vue.prototype.$jcLoading = loadingDom;

    /**
     * v-jsproper 指令 自定义一个弹窗提示的指令
     */
    Vue.directive("jsproper", {
      inserted() {},
      update(el, bind) {
        el.style.position = "reactive";
        if (el.querySelector("#jcproper")) el.querySelector("#jcproper").remove();
        const properDiv = document.createElement("div");
        properDiv.style.position = "absolute";
        // properDiv.style.maxWidth = '100px'
        properDiv.style.borderRadius = "2px";
        properDiv.style.backgroundColor = "rgba(0,0,0,0.5)";
        properDiv.style.color = "#FFFFFF";
        properDiv.style.wordWrap = "break-word";
        properDiv.style.padding = "0px 3px";
        if (bind.value.position) {
          const { position } = bind.value;
          if (position === "top") {
            properDiv.style.top = "-110%";
          } else if (position === "bottom") {
            properDiv.style.bottom = "-10px";
          } else if (position === "left") {
            properDiv.style.left = "-10px";
          } else if (position === "right") {
            properDiv.style.right = "-10px";
          }
        } else {
          properDiv.style.top = "-110%";
        }

        properDiv.style.left = "0px";
        properDiv.style.padding = "3px";
        properDiv.style.display = "none";
        properDiv.innerText = bind.value.msg;
        properDiv.id = "jcproper";
        el.appendChild(properDiv);
        el.onclick = function () {
          properDiv.style.display = "block";
          setTimeout(() => {
            properDiv.style.display = "none";
          }, 1000);
        };
      },
    });
  },
};
